<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
      integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
      crossorigin=""
    />
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script
      src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
      integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
      crossorigin=""
    ></script>
    <title>Document</title>
    <!-- 在 Leaflet 中，map panes 隐式地将图层组合在一起 -->
    <!-- Map panes 使用 z-index CSS 属性来让某些图层始终显示在其他图层之上。默认的排序是：

    TileLayer 和 GridLayer
    Path, 如线、折线、圆或 GeoJSON 图层
    Marker 阴影
    Marker 图标
    Popup -->
  </head>
  <body>
    <div
      id="map"
      style="height: 500px; width: 900px"
    ></div>
    <script>
      // imageOverlay 栅格图层
      // L.ImageOverlay 被用于在地图的特定边界上加载和显示单个图像
      // L.imageOverlay(imageUrl, latLngBounds, options)
      // 1、添加底图
      var map = L.map('map').setView([37.8, -96], 4);

      var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution:
          '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
      }).addTo(map);

      // 2、使用 L.ImageOverlay 添加一个图像覆盖物
      var imageUrl =
        'https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg';
      var errorOverlayUrl =
        'https://cdn-icons-png.flaticon.com/512/110/110686.png';
      var altText =
        'Image of Newark, N.J. in 1922. Source: The University of Texas at Austin, UT Libraries Map Collection.';
      var latLngBounds = L.latLngBounds([
        [40.799311, -74.118464],
        [40.68202047785919, -74.33],
      ]);

      var imageOverlay = L.imageOverlay(imageUrl, latLngBounds, {
        opacity: 0.8, // 不透明度
        errorOverlayUrl: errorOverlayUrl, // errorOverlayUrl 需要显示的图像覆盖物的URL，以代替加载失败的覆盖物
        alt: altText,
        interactive: true, // true，图像覆盖物将会响应鼠标的点击或悬浮事件
      }).addTo(map);

      // 3、如果您想查看 ImageOverlay 覆盖物的区域，可以将具有相同 L.LatLngBounds 的 L.Rectangle 添加到地图中
      L.rectangle(latLngBounds).addTo(map);
      map.fitBounds(latLngBounds);
    </script>
  </body>
</html>
